<template>
    <view class="tops">
        <view class="tops-lis" v-if="$utils.isHad(orderModel.order.orderStatus, [4]) && orderModel.order.payStatus == 0">
            <image class="tops-imgs" src="/sub_pages/movie/static/image/icon/icon_23.png" mode="aspectFill" />
            <view class="tops-txt">订单超时未支付，已关闭</view>
        </view>
        <view class="tops-lis" v-else-if="$utils.isHad(orderModel.order.orderStatus, [4]) && orderModel.order.payStatus == 1">
            <image class="tops-imgs" src="/sub_pages/movie/static/image/icon/icon_23.png" mode="aspectFill" />
            <view class="tops-txt">出票未成功，已退款</view>
        </view>
        <view class="tops-lis" v-else-if="$utils.isHad(orderModel.order.orderStatus, [0]) && orderModel.order.payStatus == 0">
            <image class="tops-imgs" src="/sub_pages/movie/static/image/icon/icon_24.png" mode="aspectFill" />
            <view class="tops-flex">
                <view>等待您的付款</view>
                <block v-if="orderModel.order.createTime && time">
                    <view class="tops-time">
                        <u-count-down @change="resetChange" :time="time" format="mm:ss" autoStart millisecond></u-count-down>
                    </view>
                    <view>后订单自动关闭</view>
                </block>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        orderModel: {
            type: Object,
            default: () => {},
        },
    },

    computed: {
        // 计算倒计时
        time() {
            if (!this.orderModel.order.createTime) return 0; // 如果订单的创建时间不存在，返回0

            const createTime = new Date(this.orderModel.order.createTime).getTime(); // 将订单创建时间转换为毫秒数
            const now = new Date().getTime(); // 获取当前时间的毫秒数
            //  1000 * 60 * 5 的毫秒数
            const timeLimit = 1000 * 60 * 5; // 设置倒计时时间限制为 5 分钟的毫秒数
            // 结束时间
            const endTime = createTime + timeLimit;

            const diff = endTime - now; // 计算结束时间与当前时间的时间差
            const Time = endTime <= now ? 0 : diff;
            console.log('Time: ', Time);
            return Time; // 如果 结束时间 大于等于 当前时间，则返回0，否则返回时间差
        },
    },

    methods: {
        resetChange(e) {
            for (const key in e) {
                if (e[key]) {
                    return;
                }
            }

            if (this.orderModel.order.orderStatus == 0) {
                uni.$u.debounce(() => {
                    this.$nextTick(() => {
                        setTimeout(() => {
                            this.$emit('change');
                        }, 100);
                    });
                }, 500);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
.tops {
    background-color: #ffffff;
    padding: 30rpx;
    @include flexCenterCenter;
    &-lis {
        @include flexCenter;
    }
    &-imgs {
        width: 28rpx;
        height: 28rpx;
    }
    &-txt {
        margin-left: 10rpx;
        @include font(26rpx, #333333);
    }
    &-flex {
        margin-left: 10rpx;
        @include font(26rpx, #333333);
        @include flexCenter;
    }
    &-time {
        padding: 0 10rpx;
    }
}
</style>
